<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
%>
<html>
<head>

<link rel="stylesheet" type="text/css"
	href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/script/easyUI-1.4/themes/icon.css">
<script type="text/javascript"
	src="<%=path%>/script/easyUI-1.4/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>
	<style type="text/css">
		#login {
		    background-color: #4CAF50; /* Green */
		    border: none;
		    color: white;
		    padding: 7px 16px;
		    text-align: center;
		    text-decoration: none;
		    display: inline-block;
		    font-size: 7px;
		    width: 70px;
		    height: 30px;
		    margin-left: 1024px;
		}
	</style>
</head>
<script type="text/javascript">

function showindex(){
	location.href="<%=path%>/userAction/login";
}

if(top.location!=self.location)top.location=self.location;
$(function() {
	
	var isLogin="<%=session.getAttribute("login")%>";
	
	   $('#loginAndRegDialog').dialog({
         title : '用户登录',
         width : 300,
         height : 200,
         closable : false,
         cache : false,
         modal : true,
         minimizable:true,
         buttons : "#btn"
     });
	
	$('#loginAndRegDialog').dialog('minimize');   //使登录页面加载完毕的时候登录框处于最小化状态。该语句必须等到“#loginAndRegDialog”这个div初始化完毕。否则div中的按钮将不起作用
	$("#registerBtn").bind("click", function() {
		window.location.href="<%=path%>/userAction/registerView";
	});
	
	  $("#loginBtn").bind('click',function(){
		  var isValid = $("#form").form('validate');
		  
		  if(!isValid){
			  //表单验证失败
		  }else{
			  //说明表单验证成功，ajax提交表单
			 
			    $.ajax({
		            //几个参数需要注意一下
		                type: "POST",//方法类型
		                dataType: "json",//预期服务器返回的数据类型
		                url: "<%=path%>/userAction/login",
		                data: $('#form').serialize(),
		                success: function (result) {
		                    	
		                	if(result.errMsg!=null && result.errMsg!=""){
		                		//说明用户名和密码错误
		                		$.messager.alert('提示',result.errMsg);  
		                	}else{
		                		//说明用户名密码正确
		                		var roleName=result.role;
		                		if(roleName!=null && roleName !=""){
		                			
		                			if(roleName=="admin"){
		                				//管理员用户
		                				location.href="<%=path%>/views/admin/main.jsp";
		                			}else if(roleName=="user"){
		                				//普通用户
		                				location.href="<%=path%>/views/user/main.jsp";

		                			}
		                			
		                		}else{
		                			$.messager.alert('提示',"用户的角色有问题"); 
		                		}
		                	}
		                    
		                },
		                error : function() {
		                    alert("系统异常！");
		                }
		            });
		  }
});
})

		//显示登录框
		function showLog(){
		   $('#loginAndRegDialog').dialog({
		         title : '用户登录',
		         width : 300,
		         height : 200,
		         closable : false,
		         cache : false,
		         modal : true,
		         minimizable:true,
		         buttons : "#btn"
		     });
		}
</script>



<body class="easyui-layout" >   
    <div data-options="region:'north'" style="height:100px;">
    	<div style="margin-left: 100px;margin-top: 20px">
    		<img alt="hello" src="<%=path%>/img/per_lib_logo.jpg" width="50px" height="50px" align="top">
    		<font size="6px" onclick="showindex();">个人图书馆</font>
    		<hr style="width:2px;height:30px;margin-top: -40px;margin-left:240px"></hr>
    	</div>
    	<div style="margin-top: -48px;margin-left: 380px;">
    		<font size="6px" >千万人在用的知识管理和分享平台</font>
    	</div>
    	<div>
    		<button onclick="showLog();" id="login">登录</button>
    	</div>
    </div>   
      
    <div data-options="region:'center'" >
    	<div id="tabs" class="easyui-tabs" data-options="tabWidth:80,tabHeight:40"  border="false" fit="true">
			<c:forEach items="${labelList}" var="label">
				<div title="${label.name}" style="padding: 20px; overflow: hidden; color: red;">
					<iframe scrolling="auto" application="yes" frameborder="0" style="width:100%;height:100%;" src="<%=path%>/articleAction/labelView?labelid=${label.id}"></iframe>
				</div>
			</c:forEach>
			<div data-options="iconCls:'icon-search'" title="搜索" style="mar">
				<iframe scrolling="auto" application="yes" frameborder="0" style="width:100%;height:100%;" src="<%=path%>/userAction/searchView"></iframe>
			</div>
		</div>
		
		  <div id="loginAndRegDialog">
    		<form id="form" method="post" class="easyui-form">
			<div style="margin-top: 20px; margin-left: 60px; margin-right: 60px;">
				<input type="text" id="username" name="username" value="user1"
					class="easyui-textbox"
					data-options="iconCls:'icon-man',prompt:'请输入用户名',required:true"
					style="width: 100%; height: 35px">
			</div>
			<div style="margin-top: 20px; margin-left: 60px; margin-right: 60px;">
				<input type="password" id="password" name="password" value="111"
					class="easyui-textbox"
					data-options="iconCls:'icon-man',prompt:'请输入密码',required:true"
					style="width: 100%; height: 35px">
			</div>


			<div id="btn" style="margin-top: 20px;margin-left:0px;">
				<a id="loginBtn" class="easyui-linkbutton"
					data-options="iconCls:'icon-ok'" style="width: 30%; height: 32px">登录</a>
				<a id="registerBtn" class="easyui-linkbutton"
					data-options="iconCls:'icon-man'"
					style="width: 30%; height: 32px; margin-right: 55px;">注册</a>
			</div>
		</form>
		</div>
		
    </div>   
    
</body>  

</html>